<template>
  <div class="complaint-box ly-border-card">
    <div class="header flex-center-between">
      <div>
        <span class="color-line"></span>
        <span class="title">员工申诉</span>
      </div>
      <div class="filter-box">
        <el-checkbox @change="onFilterChange" v-model="isOver">不含已结案</el-checkbox>
        <el-select placeholder="请选择" multiple collapse-tags class="no-border-select" style="margin-left:10px;width: 160px;"
                   @change="onFilterChange"
                   v-model="complaintType">
          <el-option label="集团高管受理专线" value="manage"></el-option>
          <el-option label="投诉运营管理人员" value="operation"></el-option>
          <el-option label="投诉人事部门人员" value="hr"></el-option>
        </el-select>
      </div>
    </div>
    <div class="date-box">
      <el-radio-group class="flex-center-around" v-model="dayNumber" @change="onDayNumberChange">
        <el-radio label="近一周" :value="7"></el-radio>
        <el-radio label="近一个月" :value="30"></el-radio>
        <el-radio label="近三个月" :value="90"></el-radio>
      </el-radio-group>
      <DateRange :date-number="dayNumber" @onDateRangeChange="onDateRangeChange"></DateRange>
    </div>
    <div class="complaint-content">
      <CommonTable @emitCheckComplaint="emitCheckComplaint" :table-header-data="tableHeader"
                   :table-loading="tableLoading" :table-data="tableData"></CommonTable>
    </div>
    <van-dialog
      v-model:show="showDialog"
      class="common-van-dialog"
      @closed="closeDialog"
    >
      <template #title>
        <div class="header-box flex-center-between">
          <div>
            <span class="title">申诉信息</span>
            <van-icon name="description-o"/>
          </div>
          <van-icon style="cursor: pointer;" @click.stop="showDialog = false" color="#777e8c" size="18" name="clear"/>
        </div>
      </template>
      <template #default>
        <div class="common-van-content hx-scroll">
          <van-row :gutter="[10,10]" class="complaint-rows">
            <van-col :span="6">
              <span class="label-name">案件编号</span>
            </van-col>
            <van-col :span="18">
              <div class="text">{{ complaintDetails.caseNo }}</div>
            </van-col>
            <van-col :span="6">
              <span class="label-name">申诉人</span>
            </van-col>
            <van-col :span="18">
              <div class="text">{{ complaintDetails.complaintName }}</div>
            </van-col>
            <van-col :span="6">
              <span class="label-name">所在地区</span>
            </van-col>
            <van-col :span="18">
              <div class="text">{{ complaintDetails.location }}</div>
            </van-col>
            <van-col :span="6">
              <span class="label-name">申诉类别</span>
            </van-col>
            <van-col :span="18">
              <div class="text">{{ complaintDetails.complaintType }}</div>
            </van-col>
            <van-col :span="24">
              <div class="label-name">问题描述</div>
            </van-col>
            <van-col :span="24">
              <div class="text" style="text-align: left;">{{ complaintDetails.questionDesc }}</div>
            </van-col>
          </van-row>
          <van-divider
            :style="{ color: '#1989fa', borderColor: '#1989fa',fontWeight:'bold' }"
          >
            申诉进度
          </van-divider>

          <ul class="progress-ul">
            <li class="progress-li" v-for="item in complaintDetails.appealProcess" :key="item.time">
              <div class="flex-center-between header">
                <div>
                  <span class="name">{{ item.name }}</span>
                  <span class="reply" v-if="item.type === 'reply'">回复：</span>
                </div>
                <span class="time">{{ item.time }}</span>
              </div>
              <div class="message-text">
                {{ item.message }}
              </div>
            </li>
          </ul>
        </div>
      </template>
    </van-dialog>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import DateRange from "@/components/DateRange.vue";
import CommonTable from "@/components/CommonTable.vue";

const isOver = ref(true)
const complaintType = ref(['manage'])

function onFilterChange() {

}

const dayNumber = ref(7)

function onDayNumberChange(val) {
  dayNumber.value = val
}

function onDateRangeChange(dateArr, isConfirm) {
  console.log(dateArr, 'dateArr')
  if (isConfirm) {
    dayNumber.value = 0
  }
}

const showDialog = ref(false)
const complaintDetails = {
  caseNo: '202501190008',
  complaintName: 'Shanze Li/李善泽',
  workNo: '10958519',
  location: '苏州，苏州模切',
  complaintType: '投诉，职能服务问题，办公/服务设施问题',
  questionDesc: '苏州新厂A3办公室出现许多老鼠，大量同事办公用品，水果等遭破坏。厂区行政不作为',
  appealProcess: [
    {
      type: 'system',
      name: 'Shanze Li/李善泽',
      time: '2025-02-19 00:00:281',
      message: '申诉已提交，正在处理中'
    },
    {
      type: 'reply',
      name: 'Cuixia Zhang/张翠霞',
      time: '2025-02-19 00:00:282',
      message: 'A3办公室消杀的问题，行政已与区域负责人沟通，定期进行除四害消杀，行政会跟进区域部门消杀情况及频率，杜绝此类隐患'
    },
    {
      type: 'reply',
      name: 'Shanze Li/李善泽',
      time: '2025-02-19 00:00:283',
      message: '未解决！未解决！'
    },
    {
      type: 'reply',
      name: 'Cuixia Zhang/张翠霞',
      time: '2025-02-19 00:00:284',
      message: '行政已与员工对接商讨出消杀策略，后续按规则进行消杀'
    },
    {
      type: 'reply',
      name: 'Cuixia Zhang/张翠霞',
      time: '2025-02-19 00:00:285',
      message: '预结案'
    },
    {
      type: 'system',
      name: '系统',
      time: '2025-02-19 00:00:286',
      message: '已结案'
    }
  ]
}

function closeDialog() {
  complaintDetails.value = {}
}

function emitCheckComplaint(row) {
  showDialog.value = true
  console.log(row, 'emitCheckComplaint')
}

const tableLoading = ref(false)
const tableData = [{
  factoryArea: '冲压一厂',
  complaintType: '投诉运营管理人员',
  id: '1',
  status: '已结案',
  time: '2023/05/16'
}]
const tableHeader = [
  {prop: 'factoryArea', label: '厂区', 'min-width': 60, align: 'center'},
  {prop: 'complaintType', label: '申诉类别', 'min-width': 60, align: 'center'},
  {prop: 'specificSituation', label: '具体情况', 'min-width': 60, align: 'center'},
  {prop: 'status', label: '状态', 'min-width': 60, align: 'center'},
  {prop: 'time', label: '时间', 'min-width': 80, align: 'center'}
]

</script>

<style scoped lang="scss">
.complaint-box {
  height: 100%;
  display: flex;
  flex-direction: column;

  .filter-box {
    margin-left: 10px;
    flex: 1;
    width: 1px;
    display: flex;
    align-items: center;
    font-size: 12px;
    justify-content: flex-end;
  }

  .date-box {
    margin-top: 10px;
  }

  .complaint-content {
    flex: 1;
    height: 1px;
    margin-top: 10px;
  }
}

.common-van-dialog {
  .header-box {
    padding: 0 10px;
  }

  .complaint-rows {
    .label-name {
      color: $font-color-tips;
    }

    .text {
      font-weight: bold;
      text-align: right;
      font-size: 12px;
    }
  }

  .progress-ul {
    margin-top: 10px;

    .progress-li {
      padding: 10px 0;
      border-top: 1px solid $font-color-gray-3;

      .header {
        font-size: 12px;
        color: $font-color-tips;

        .reply {
          margin-left: 4px;
        }
      }

      .message-text {
        margin-top: 10px;
        font-weight: bold;
        font-size: 12px;
      }
    }
  }
}
</style>
